<template>
  <div class="com-orders">
    <div class="orders-head">
      <div class="complete">
        <span class="name">订单完成率</span>
        <span class="num">{{ (completeRate * 100).toFixed(1) + '%' }}</span>
      </div>
      <div class="symbol">=</div>
      <div class="valid">
        <span class="name">有效订单</span>
        <span class="num">{{ ordersData.validOrderCount }}</span>
      </div>
      <div class="symbol">/</div>
      <div class="total">
        <span class="name">订单总数</span>
        <span class="num">{{ ordersData.totalOrderCount }}</span>
      </div>
    </div>
    <div class="orders-main" ref="ordersMain"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getOrderStatistics } from '@/api/statistics'
export default {
  name: 'ComOrders',
  data () {
    return {
      ordersData: {
        dateList: '',
        orderCompletionRate: '',
        orderCountList: '',
        totalOrderCount: '',
        validOrderCount: '',
        validOrderCountList: ''
      }
    }
  },
  created () {
    this.getOrderStatistics()
  },
  computed: {
    completeRate () {
      return (this.ordersData.validOrderCount / this.ordersData.totalOrderCount)
    }
  },
  props: {
    begin: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    }
  },
  methods: {
    async getOrderStatistics () {
      const res = await getOrderStatistics({
        begin: this.begin,
        end: this.end
      })
      if (res.code === 1) {
        this.ordersData = {
          ...res.data,
          dateList: res.data.dateList.split(','),
          orderCountList: res.data.orderCountList.split(','),
          validOrderCountList: res.data.validOrderCountList.split(',')
        }
        this.$nextTick(() => this.orders())
      }
    },
    orders () {
      const myChart = echarts.init(this.$refs.ordersMain)
      const options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', // 背景颜色（此时为默认色）
          borderRadius: 2, // 边框圆角
          textStyle: {
            color: '#333', // 字体颜色
            fontSize: 12, // 字体大小
            fontWeight: 300
          }
        },
        grid: {
          top: '5%',
          left: '10',
          right: '50',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
          // X轴字体颜色
            color: '#666',
            fontSize: 12
          },
          axisLine: {
          // X轴线颜色
            lineStyle: {
              color: '#E5E4E4',
              width: 1 // x轴线的宽度
            }
          },
          data: this.ordersData.dateList // 后端传来的动态数据
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            interval: 50,
            axisLabel: {
              color: '#666',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            type: 'line',
            // stack: 'Total',
            smooth: false, // 否平滑曲线
            showSymbol: false, // 未显示鼠标上移的圆点
            // symbol:"circle", //设置折线点定位实心点
            lineStyle: { // 直接设置线样式
              color: '#FFD000',
              width: 2 // 建议明确线宽
            },
            itemStyle: { // 单独设置折线点样式
              color: '#F29C1B'
            },
            emphasis: { // 高亮状态
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100'
              },
              lineStyle: { // 高亮时线样式（可选）
                width: 3
              }
            }
          },
          {
            showSymbol: false,
            symbolSize: 10,
            name: '订单总数',
            type: 'line',
            stack: 'top',
            data: this.ordersData.orderCountList,
            lineStyle: {
              color: '#ffe400',
              width: 2
            },
            itemStyle: {
              color: '#ffc100'
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100'
              }
            }
          },
          {
            showSymbol: false,
            symbolSize: 10,
            name: '有效订单数',
            type: 'line',
            stack: 'bottom',
            data: this.ordersData.validOrderCountList,
            lineStyle: {
              color: '#ff8b8b',
              width: 2
            },
            itemStyle: {
              color: '#fd7f7f'
            },
            emphasis: {
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#fd7f7f'
              }
            }
          }
        ]
      }
      myChart.setOption(options)
    }
  },
  watch: {
    begin () {
      this.getOrderStatistics()
    }
  }
}
</script>

<style lang="less" scoped>
.com-orders,
.orders-main {
  height: 100%;
}

.orders-head {
  margin-bottom: 10px;
}

.com-orders {
  .orders-head {
    display: flex;
    align-items: center;
    gap: 10px;

    > div {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 12px;
        color: #666;
      }

      .num {
        font-size: 16px;
        color: #000;
        font-weight: 700;
      }
    }

    .symbol {
      font-size: 16px;
      color: #666;
      padding: 0 10px;
    }
  }
}
</style>
